<template>
	<CustomContainer class="clothBox" pagePath="clothes" title="服装">
		<!-- 自定义右侧内容 -->
		<view slot="right">
			<view class="rightBtn">
				<image :style="{marginRight:'16px'}" class="btnIcon" src="../../static/filter.png"></image>
				<image class="btnIcon" src="../../static/add.png" @click="goToSetPage"></image>
			</view>
		</view>
		<view class="contentBox">
			<view class="container-left">
				<view :class="['leftItem', leftAction === 0 ? 'leftAction' : '']" @click="leftClick(0)">牛仔裤</view>
				<view :class="['leftItem', leftAction === 1 ? 'leftAction' : '']" @click="leftClick(1)">外套</view>
				<view :class="['leftItem', leftAction === 2 ? 'leftAction' : '']" @click="leftClick(2)">T恤</view>
			</view>
			<view class="container-right">右侧</view>
		</view>
		<Module ref="showRight" :parentType="parentType" :typeList="typeList" @getList='getDataListFun'></Module>
	</CustomContainer>
</template>

<script setup>
import CustomContainer from '@/components/CustomContainer.vue';
import Module from '@/components/module.vue';
export default {
	data() {
		return {
			leftAction: 0,
			parentType: 'clothing', // 新增数据时的父字段名称，
			typeList:[]
		};
	},
	components: {
		CustomContainer,
		Module
	},
	mounted() {
		this.getTypeListFn();
	},
	methods: {
		leftClick(params) {
			console.log('params', params);
			this.leftAction = params;
		},
		goToSetPage(){
			// uni.navigateTo({
			// 	url: '/pages/clothes/setClothPage'
			// });
			this.$refs.showRight.showDrawer();
		},
		getDataListFun(){
			this.getTypeListFn();
		},
		// 获取类型列表
		getTypeListFn() {
			uni.showLoading();
			uniCloud.callFunction({
				name: 'add_typeList',
				data: {
					action: 'getTypeList',
					params: {
						totalType:this.parentType
					}
				}
			}).then((res)=>{
				const { result } = res || {};
				uni.hideLoading()
				const typeList = result?.data[0].typeList.map((item)=>{
					return{
						value: item,
						text: item
					}
				});
				this.typeList = typeList;
			})
		},
	}
};
</script>

<style scoped lang="less">
.clothBox {
	.rightBtn{
		display: flex;
		align-items: center;
		.btnIcon{
			width: 18px;
			height: 18px;
			// margin-left: 16px;
		}
	}
	.contentBox {
		width: 100%;
		height: 100%;
		display: flex;

		.container-left {
			width: 80px;
			max-width: 100px;
			padding-right: 8px;

			.leftItem {
				padding: 8px 6px;
				border-radius: 4px;
				background-color: unset;
			}

			.leftAction {
				background-color: #fff;
			}
		}

		.container-right {
			flex: 1;
			height: 100%;
			background-color: #fff;
		}
	}
}
</style>
